<template>
    <div class="dialog">
        <!--<el-button @click="showState">测试</el-button>-->
        <div class="login-box">
            <h1>登录</h1>
            <el-row>
                <el-col>
                    <el-input type="text" id="user" v-model="formName.user" placeholder="请输入账号"
                              @blur="inputBlur('user',formName.user)">
                        <template slot="prepend">帐号</template>
                    </el-input>
                    <p>{{formName.userError}}</p>
                </el-col>
            </el-row>
            <br/>
            <el-row>
                <el-col>
                    <el-input type="password" id="password" v-model="formName.password" placeholder="请输入密码"
                              @blur="inputBlur('password',formName.password)">
                        <template slot="prepend">密码</template>
                    </el-input>
                    <p>{{formName.passwordError}}</p>
                </el-col>
            </el-row>
            <br/>
            <el-row>
                <el-col>
                    <el-input type="text" id="verify" v-model="formName.verify" placeholder="请输入验证码"
                              @blur="inputBlur('verify',formName.verify)" style="width: 180px;">
                        <!--<template slot="prepend">验证码</template>-->
                    </el-input>
                    <div class="verify-box" @click="refreshCode">
                        <SIdentify :identifyCode="identifyCode"></SIdentify>
                    </div>
                </el-col>
            </el-row>
            <br/>
            <el-row>
                <el-col style="padding-left: 155px;">
                    <el-button type="primary" @click="submitForm(false)" v-bind:disabled="formName.beDisabled">提交
                    </el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import crypto from 'crypto'

    export default {
        // 因为login.vue 在v-if下，所有需要动态加载 identify组件
        components: {SIdentify: resolve => require([`@/components/common/identify.vue`], resolve)},
        data() {
            return {
                identifyCode: "",
                identifyCodes: "1234567890",
                formName: {//表单中的参数
                    user: 'wyait', userError: '', password: '123456', passwordError: '',verify:'',verifyError:'', beDisabled: true
                }, beShow: false//传值给父组件
            }
        },
        mounted(){
            this.identifyCode = "";
            this.makeCode(this.identifyCodes, 4);
        },
        methods: {
            showState:function(){
                // 触发主页面的登录成功后处理
                this.$emit("doLoginSuccessEvent","this message is from child");
            },
            resetForm: function () {
                this.formName.user = '';
                this.formName.userError = '';
                this.formName.password = '';
                this.formName.passwordError = '';
                this.formName.verify = '';
                this.formName.verifyError = '';
            },
            submitForm: function (loginModel) {
                // 认证验证码
                var verify = this.formName.verify;
                // 验证码错误
                if (verify != this.identifyCode){
                    this.$alert("验证码错误！", '提示', {confirmButtonText: '确定'});
                    return;
                }

                //提交user password
                var user = this.formName.user;
                var password = this.getMd5(this.formName.password);// md5加密
                this.$axios.post(this.$serverUrl + '/login?username=' + user + '&password=' + password + '&loginModel=' + loginModel).then((res) => {
                    this.$alert(res.data.response.msg, '提示', {confirmButtonText: '确定'});
                    if (res.data.response.code === "200") {
                        // 添加token
                        this.$axios.defaults.headers.common['Authorization'] = res.data.data;
                        // 触发主页面的登录成功后处理
                        this.$emit("doLoginSuccessEvent",this.formName.user);
                    } else {
                        this.$axios.defaults.headers.common['Authorization'] = "";
                    }
                }).catch((res) => {
                    this.$axios.defaults.headers.common['Authorization'] = "";
                    if (res.response.data.response.code === "408") {
                        this.$confirm('', {
                            message: '用户已登录，是否进行强制登录?',
                            title: '提示',
                            confirmButtonText: '确认',
                            cancelButtonText: '取消'
                        }).then(action => {
                            this.submitForm(true);
                        }).catch(err => {
                            this.resetForm();
                        });
                    } else {
                        this.$alert(res.response.data.response.msg, '提示', {confirmButtonText: '确定'});
                    }
                })
            },
            inputBlur: function (errorItem, inputContent) {
                if (errorItem === 'user') {
                    if (inputContent === '') {
                        this.formName.userError = '用户名不能为空';
                    } else {
                        this.formName.userError = '';
                    }
                } else if (errorItem === 'password') {
                    if (inputContent === '') {
                        this.formName.passwordError = '密码不能为空';
                    } else {
                        this.formName.passwordError = '';
                    }
                } else if (errorItem === 'verify') {
                    if (inputContent === '') {
                        this.formName.verifyError = '验证码不能为空';
                    } else {
                        this.formName.verifyError = '';
                    }
                }
                // 对于按钮的状态进行修改
                if (this.formName.user != '' && this.formName.password != ''&& this.formName.verify != '') {
                    this.formName.beDisabled = false;
                } else {
                    this.formName.beDisabled = true;
                }
            },
            refreshCode: function () {
                this.identifyCode = "";
                this.makeCode(this.identifyCodes, 4);
            },
            makeCode: function (o, l) {
                for (let i = 0; i < l; i++) {
                    this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
                }
                console.log(this.identifyCode);
            },
            randomNum: function (min, max) {
                return Math.floor(Math.random() * (max - min) + min);
            },
            getMd5:function (data) {
                var md5 = crypto.createHash("md5");
                md5.update(data);//this.pw2这是你要加密的密码
                return md5.digest('hex');
            }
        },
    }
</script>

<style scoped>
    html, body {
        margin: 0;
        padding: 0;
        position: relative;
    }

    .dialog {
        width: 100%;
        height: 100%;
        background: #fff;
    }

    .login-box {
        margin-top: 50px;
        margin-left: 40%;
        background-color: darkseagreen;
        border-radius: 8px;
        width: 350px;
        box-sizing: border-box;
        padding: 10px 20px 20px;
    }

    .loginPage {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -300px;
        margin-left: -175px;
        width: 350px;
        min-height: 300px;
        padding: 30px 20px 20px;
        border-radius: 8px;
        box-sizing: border-box;
        background-color: #fff;
    }

    .login-box p {
        color: red;
        text-align: left;
    }

    .verify-box {
        /*margin: 400px auto;*/
        width: 114px;
        height: 40px;
        /*border: 1px solid red;*/
        float: right;
        padding-right: 5px;
    }

</style>
